<template>
    <el-select ref="select-tree" v-model="labelText" placeholder="请选择" :disabled="selectDisabled" :size="selectSize"
               :style="selectStyle">
        <template slot="empty">
            <el-tree :data="data"
                     node-key="id"
                     class="select-tree"
                     ref="tree"
                     :current-node-key="val"
                     @node-click="handleNodeClick"
                     check-on-click-node
                     :props="defaultProps"
                     :default-expand-all="true"
                     :expand-on-click-node="false"
                     highlight-current></el-tree>
        </template>
    </el-select>
</template>

<script>
export default {
  name: 'select-tree',
  data() {
    return {
      val: this.value,
      labelText: '',
      data: this.treeList,
      defaultProps: this.prop
    }
  },
  model: {
    prop: 'value',
    event: 'handlerValueChange'
  },
  props: {
    disabled: Boolean,
    size: String,
    styleObj: String,
    value: {
      type: [String, Number],
      default: 0
    },
    prop: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    treeList: {
      type: Array,
      default: []
    }
  },

  watch: {
    value: {
      handler(val) {
        this.val = val;
      },
      immediate: true,
      deep: true
    },
    'treeList': {
      handler(n, o) {
        // if (!n) {
        //   this.val = '';
        //   this.label = '';
        // } else {
        //   this.data[0].children = n;
        // }
        if (n) {
          this.data = n;
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    checkTree(data, val) {
      let selected;

      function f(data, val) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].id === val) {
            selected = data[i];
            return;
          }
          if (data[i].children) {
            f(data[i].children, val)
          }
        }
      }

      f(data, val);
      return selected;
    },
    changeNLabel(selected) {

      if (selected) {
        let node= this.$refs.tree.getNode(selected);
        if (this.data.length !== 0) {
          if (node) {
            this.labelText = node.data[this.defaultProps.label];
            this.val = node.data.id;
            this.$refs.tree.setChecked(node.id);
            this.$refs.tree.setCurrentKey(node.id);
          } else {
            this.$refs.tree.setCurrentKey(null);
            this.labelText = null;
            this.val = null;
          }
        }
      } else {
        this.$refs.tree.setCurrentKey(null);
        this.labelText = null;
        this.val = null;
      }

    },
    handleNodeClick(data) {
      this.changeNLabel(data);
      this.$emit('handlerValueChange', this.val, this.labelText);
      this.$refs['select-tree'].blur();
    }
  },
  computed: {
    selectSize() {
      return this.size || '';
    },
    selectDisabled() {
      return this.disabled || false;
    },
    selectStyle() {
      return this.styleObj || '';
    }
  },
  mounted() {
    this.val = this.value;
    this.$nextTick(() => {
      this.changeNLabel(this.val);
    })
  }
}
</script>

<style scoped>
.select-tree{
    overflow: auto;
    max-height: 350px;
    padding: 5px 2px;
}
</style>
